import { Theme } from "../../themes/theme.slint";
import { FontIcon } from "../fonticon.slint";
import { Icons } from "../../icons/index.slint";

component MenuNormalItem inherits Rectangle{
    height: 40px;

    in property <image> icon;
    in property <string> title;
    in property <bool> active;
    in property <int> level;

    callback clicked();

    function calc-indent() -> length {
        return (level + 1) * 24px;
    }

    bg := Rectangle {
        background: transparent;
    }
    ta := TouchArea {
        clicked => { root.clicked(); }
    }

    HorizontalLayout {
        spacing: 10px;
        padding-left: calc-indent();
        padding-right: 16px;
        img := FontIcon {
            y: (root.height - self.height) /2;
            source: icon;
        }

        t := Text {
            text: title;
            font-size: Theme.font-size;
            vertical-alignment: center;
            color: Theme.title-color;
        }
    }

    fix := Rectangle {
        x: (root.width - self.width);
        width: 2px;
        height: 0px;
        background: Theme.brand_color;
        
        animate height {
             duration: 100ms;
        }
    }

    states [
        active when active: {
            bg.background: Theme.palette.blue-0;
            img.font-color: Theme.hover-color;
            t.color: Theme.hover-color;
            fix.height: root.height;
        }

        hover when ta.has-hover && !active: {
            img.font-color: Theme.hover-color;
            t.color: Theme.hover-color;
        }
    ]
}

component MenuCollapseItem inherits Rectangle{
    height: 40px;

    in property <image> icon;
    in property <string> title;
    in property <bool> active;
    in property <bool> is-streched;
    in property <int> level;

    callback clicked();

    function calc-indent() -> length {
        return (level + 1) * 24px;
    }

    bg := Rectangle {
        background: transparent;
    }
    ta := TouchArea {
        clicked => { root.clicked(); }
    }

    HorizontalLayout {
        spacing: 10px;
        padding-left: calc-indent();
        padding-right: 16px;
        img := FontIcon {
            y: (root.height - self.height) /2;
            source: icon;
        }

        t := Text {
            text: title;
            font-size: Theme.font-size;
            vertical-alignment: center;
            color: Theme.title-color;
        }

    }

    down := FontIcon {
        x: (root.width - self.width - 24px);
        source: Icons.down;
        rotation-angle: is-streched ? 180deg: 0;

        animate rotation-angle {
             duration: 300ms;
        }
    }

    states [
        active when active: {
            img.font-color: Theme.hover-color;
            t.color: Theme.hover-color;
            down.colorize: Theme.hover-color;
        }

        hover when ta.has-hover && !active: {
            img.font-color: Theme.hover-color;
            t.color: Theme.hover-color;
            down.colorize: Theme.hover-color;
        }
    ]
}

export struct MenuItemData {
    icon: image,
    title: string,
    level: int,
    is-collapse: bool,
    active: bool,
    is-streched: bool,
}

component MenuItem {
    in property <MenuItemData> model;

    callback clicked();

    if model.is-collapse: MenuCollapseItem {
        width: 100%;
        height: 100%;

        icon: model.icon;
        title: model.title;
        active: model.active;
        is-streched: model.is-streched;
        level: model.level;

        clicked => {
            root.clicked()
        }
    }

    if !model.is-collapse: MenuNormalItem {
        width: 100%;
        height: 100%;

        icon: model.icon;
        title: model.title;
        active: model.active;
        level: model.level;

        clicked => {
            root.clicked()
        }
    }
}

export component VeriticalMenu {
    in-out property <[MenuItemData]> model;
    
    VerticalLayout {
        for item-data in model: MenuItem {
            model: item-data;
        }
    }
}
